<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			* {
					margin: 0px;
					padding: 0px;
				}
			
				body {
					height: 100%;
				}
			
				html {
					height: 100%;
				}
				/* 大盒子 */
				#excel {
				
					width: 90%;
			/* 		box-shadow: 20px; */
					background-color: white;
					margin: 0 auto;
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
					margin-top: 20px;
				}
				#header{
					top:0px;
					background-color: white;
					position: sticky;
					z-index: 5;
				}
				#header #left{
					height: 80px;
					line-height: 80px;
					text-indent: 12px;
						
				}
				#header #right{
					height: 80px;
					
					line-height: 80px;
					/* font-size: 32px;
					font-weight: bold; */
					text-align: right;
					}
				#hr1{

					color: whitesmoke;
					margin-bottom: 30px;
					
				}
				#body-last,#body-date,#body-source{
					margin-top: 30px;
				}
				 .el-dropdown-link {
				    cursor: pointer;
				    color: #409EFF;
				  }
				  .el-icon-arrow-down {
				    font-size: 12px;
				  }
		</style>
	</head>
	<body>
		<div id="excel">
			<el-row id="header">
			  <el-col :span="12"><div class="grid-content bg-purple" id="left">
			  <h3>导出管理</h3>
			  </div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
			  <el-button type="primary"  @click="toIndex" >
			  	<el-link style="color: white;" href="javascript:void(0)">返回</el-link>
			  </el-button>
			  </div></el-col>
			  <hr id="hr1"/>
			</el-row>
			<!-- <el-row>
				
			</el-row> -->
			
			
			<el-row style="padding-left: 40px;">
				   <el-col :span="6">
					   <div class="grid-content bg-purple">
						   <el-dropdown >
						     <span class="el-dropdown-link" >
								 <el-button>登记表类别</el-button>
						       <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
						     </span>
						     <el-dropdown-menu slot="dropdown">
						       <el-dropdown-item>黄金糕</el-dropdown-item>
						       <el-dropdown-item>狮子头</el-dropdown-item>
						       <el-dropdown-item>螺蛳粉</el-dropdown-item>
						       <el-dropdown-item disabled>双皮奶</el-dropdown-item>
						       <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
						     </el-dropdown-menu>
						   </el-dropdown>
					   </div>
				   </el-col>
				
				    <el-col :span="12"><div class="grid-content bg-purple">
				
				     <el-date-picker
				       v-model="dateValue"
				       type="daterange"
				       range-separator="至"
				       start-placeholder="开始日期"
				       end-placeholder="结束日期"
					   value-format="yyyy-MM-dd">
				     </el-date-picker>
					</div></el-col>
				    <el-col :span="6"><div class="grid-content bg-purple-light">
					 <el-button>查询</el-button>
					</div></el-col>
			</el-row>
			
			<el-row style="padding-left: 40px;">
				<el-col :span="24" ><div id="body-date" class="grid-content bg-purple-light" >
				 {{dateValue[0]}}  至 {{dateValue[1]}}
				</div></el-col>
				
				<el-col :span="24" ><div id="body-source" class="grid-content bg-purple-light">
				 <div id="source" >
					  <el-table
					      :data="tableData"
					      style="width: 100%">
					      <el-table-column
					        prop="date"
					        label="日期"
					        width="180">
					      </el-table-column>
					      <el-table-column
					        prop="name"
					        label="姓名"
					        width="180">
					      </el-table-column>
					      <el-table-column
					        prop="address"
					        label="地址">
					      </el-table-column>
					    </el-table>
				 
				 </div>
				</div></el-col>
				
				<el-col :span="24" ><div id="body-last" class="grid-content bg-purple-light">
				 	 <el-button type="primary">导出</el-button>
					
				</div></el-col>
				
				
			
			</el-row>
			
					 

		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#excel",
			data:{
				dateValue:['开始时间','结束时间'],
				tableData: [{
				            date: '2016-05-02',
				            name: '王小虎',
				            address: '上海市普陀区金沙江路 1518 弄'
				          }, {
				            date: '2016-05-04',
				            name: '王小虎',
				            address: '上海市普陀区金沙江路 1517 弄'
				          }, {
				            date: '2016-05-01',
				            name: '王小虎',
				            address: '上海市普陀区金沙江路 1519 弄'
				          }, {
				            date: '2016-05-03',
				            name: '王小虎',
				            address: '上海市普陀区金沙江路 1516 弄'
				          }]
			},
			created(){
				
			},
			methods:{
				toIndex(){
					window.parent.location='index.html'
				},
				
			   //测试函数
			   test(){
				   console.log(this.value)
			   }
			   
			}
		})
	</script>
</html>